<script setup lang="ts">
import {QuestionType} from '../types/questionTypes'

const props = defineProps<{
  modelValue?: number
  isEditorFullscreen?: boolean
  disabled?: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

// 题目类型选项
const questionTypeOptions = [
  {label: '编程题', value: QuestionType.PROGRAMMING},
  {label: '选择题', value: QuestionType.MULTIPLE_CHOICE},
  {label: '判断题', value: QuestionType.JUDGEMENT},
  {label: '填空题', value: QuestionType.FILL_BLANK},
  {label: '综合题', value: QuestionType.COMPREHENSIVE}
]

// 当选择变化时触发更新
const handleTypeChange = (value: number) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <div class="main-section">
    <el-form-item :class="{ 'hide-when-fullscreen': isEditorFullscreen }">
      <template #label>
        题目类型<span class="required-asterisk">*</span>
      </template>
      <div class="question-type-container">
        <el-radio-group
            :model-value="modelValue || QuestionType.PROGRAMMING"
            @update:model-value="handleTypeChange"
            class="question-type-selector"
            :disabled="disabled"
        >
          <el-radio-button
              v-for="option in questionTypeOptions"
              :key="option.value"
              :value="option.value"
          >
            {{ option.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
    </el-form-item>
  </div>
</template>

<style scoped>
.question-type-container {
  width: 100%;
  margin-bottom: 16px;
}

.question-type-selector {
  width: 100%;
  display: flex;
}

:deep(.question-type-selector .el-radio-button) {
  flex: 1;
}

:deep(.question-type-selector .el-radio-button__inner) {
  width: 100%;
}

.hide-when-fullscreen {
  display: none !important;
}

.main-section {
  background: var(--el-bg-color);
  border-radius: 8px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


:deep(.el-form-item__label) {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  padding-bottom: 12px;
  position: relative;
  display: inline-block;
}

:deep(.el-form-item__label)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 24px;
  height: 2px;
  background-color: var(--el-color-primary);
  border-radius: 1px;
}

.required-asterisk {
  color: var(--el-color-danger);
  margin-left: 4px;
}

@media screen and (max-width: 768px) {
  :deep(.question-type-selector) {
    flex-wrap: wrap;
  }

  :deep(.question-type-selector .el-radio-button) {
    flex: 1 0 50%;
    margin-bottom: 8px;
  }
}
</style> 